<template>
  <div>
    <el-container>
      <el-header><div style="border: 1px;">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">

          <el-menu-item index="1" ><img style="margin-left: 20px ;width: 150px;height: 50px" src="http://qpt0e0e6g.hb-bkt.clouddn.com/login.png"></el-menu-item>
          <el-menu-item index="2" style="margin-left: 10px;font-size: 18px" @click="toindex">首页</el-menu-item>
          <el-menu-item index="3" style="margin-left: 10px;font-size: 18px">榜单</el-menu-item>
          <el-menu-item index="4"  style="margin-left: 10px;font-size: 18px">COS</el-menu-item>
          <el-menu-item index="5"  style="margin-left: 10px;font-size: 18px">视频</el-menu-item>
          <el-menu-item index="6"  style="margin-left: 10px;font-size: 18px">问答</el-menu-item>
          <el-menu-item index="7">
            <el-input  style="width: 200px ;"
                       placeholder="搜索COS、视频、用户..."
                       v-model="input"
                       clearable >
            </el-input>  <el-button @click="sousuo" style="height: 39px;" con="el-icon-search">搜索</el-button>
          </el-menu-item>

          <el-menu-item index="8"  v-if="disUser" style="margin-left: 35px;font-size: 18px" >
            <template>
              <div class="demo-type">
                <el-avatar :size="50" :src="user.pic" @error="errorHandler">
                  <img @click="tooneself" src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
                </el-avatar>
              </div>
            </template>
          </el-menu-item>
          <el-menu-item index="9"  v-if="disUser" style="margin-left: 5px;font-size: 18px" @click="outlogin">退出</el-menu-item>
          <el-menu-item index="8" v-if="disUser1" style="margin-left: 65px;font-size: 18px" >登录</el-menu-item>
          <el-menu-item index="9"  v-if="disUser1" style="margin-left: 5px;font-size: 18px" >注册</el-menu-item>
          <el-dropdown index="10" style="margin-left: 10px ;" >
            <el-button style="background-color: #ff6fa2;width: 100px;height: 50px;">
              <i class="el-icon-finished el-icon--right"style="font-size: 20px;align-content: center;color: aliceblue">发布</i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-circle-plus">图片</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-plus" @click="tomvUp">视频</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </el-menu>
      </div></el-header>
      <el-row style="background-color: bisque">

      </el-row>

    </el-container>
    <div style="margin-left: 100px;margin-top: 100px;width: 1000px;">
      <el-form ref="form" :model="mvList" label-width="80px">
        <el-form-item label="视频名">
          <el-input v-model="mvList.mvName" ></el-input>
        </el-form-item>
        <el-form-item label="视频简介">
          <el-input  v-model="mvList.mvDesc" ></el-input>
        </el-form-item>
        <el-form-item label="展示照片">
          <el-upload
            class="avatar-uploader"
            action="http://localhost/bcy-user/user/uploadPic"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="视频">
          <el-upload
            class="avatar-uploader"
            action="http://localhost/bcy-user/user/uploadPic"
            :show-file-list="false"
            :on-success="handleAvatarSuccess1"
          >
            <video v-if="imageUrl1" :src="mvList.video" autoplay="autoplay"  class="avatar"/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

        </el-form-item>


      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="moSunbmit()">确 定</el-button>
  </span>
    </div>


  </div>
</template>

<script>
  import axios from 'axios';
  axios.defaults.withCredentials=true
    export default {
        name: "oneself",
      data() {
        return {
           mvList:{},
          user:{},
          disUser:false,
          disUser1:true,
          fansList: [],
          input:'',
          activeIndex: '1',
          dialogVisible:false,
          imageUrl: '',
          imageUrl1: ''
        };
      },
      methods: {
          handleAvatarSuccess(res, file) {
          this.imageUrl = URL.createObjectURL(file.raw);
          this.mvList.mvPic=res;
        },
        tologin:function(){
          this.$router.push("/login")
        }, toregist:function(){
          this.$router.push("/regist")
        },handleAvatarSuccess1(res, file) {
          this.imageUrl1 = URL.createObjectURL(file.raw);
          this.mvList.video=res;
        },
        moSunbmit:function () {
          this.$confirm('是否提交修改, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            //请求后台进行修改数据
            axios.post("http://localhost/bcy-mvshare/redio/addredio",this.mvList).then(res=> {
              if (res.data.code==200){
                this.$message({
                  type: 'success',
                  message: '上传成功!',
                })
              }
            })
            this.dialogVisible=false;
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消提交'
            });
          });
        }, handleClicks() {
          this.dialogVisible=true;
        },
        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {});
        },
        toindex:function(){
          this.$router.push("/index")
        },
        sousuo:function(){
          axios.get("http://localhost/shop-search/search/findAll/"+this.input).then(res=>{
            if (res.data.code==200){
              this.shareList=res.data.data;
            }
          })
        },  tomvUp:function(){
          this.$router.push("/mvUpload")
        },
        tooneself:function () {
          this.$router.push("/oneself")
        },
        errorHandler() {
          return true
        },outlogin:function(){
          axios.get("http://localhost/bcy-user/user/outlogin").then(res=>{
            if (res.data.code==200){
              this.$message({
                type: 'success',
                message: '退出成功!',
              });
              this.$router.push("/login")
            }
          })

        },
        findUserById:function(){
          axios.get("http://localhost/bcy-user/user/findUserById").then(res=>{
            if (res.data.code==200){
              this.user=res.data.data;
              this.disUser=true;
              this.disUser1=false;
            }else if(res.data.code==206){
              alert(res.data.message)
              this.$router.push("login")
            }else {
              alert(res.data.message)
            }
          });
        },
        handleSelect(key, keyPath) {
          console.log(key, keyPath);
        },



      },
    mounted() {
     this.findUserById();
    }
    }
</script>

<style scoped>
  .el-header, .el-footer {

    color: #333;
    text-align: center;
    line-height: 60px;
  }
  /*.el-row {*/
    /*margin-bottom: 20px;*/
  /*&:last-child {*/
     /*margin-bottom: 0;*/
   /*}*/
  /*}*/
  .el-col {
    border-radius: 4px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .bg-purple {
  }
  .bg-purple-light {
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
  }
</style>
